<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<% String path = request.getContextPath();%> 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>垃圾分类查询</title>
<link href="<%=path%>/static/usercss/css/all.css?ehweee43w3" rel="stylesheet" type="text/css">
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
</head>
<body>
<jsp:include page="/WEB-INF/web/includ/header.jsp"></jsp:include>
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<c:set var="pageNum" value="${requestScope.pageInfo.pageNum}"></c:set>
<section>
<div class="wrap">
  <div id="seach">
    <div id="logo"><a href="javascript:void(0);" title="垃圾分类查询" >分类查询</a></div>
    <div class="seach">
      <input type="text" name="seach" class="seach_txt" id="seach">
      <input id="seachBySolr" type="submit" class="seach_bun" name="button" id="button" value="查询分类">
    </div>
  </div>
<nav>
    <div class="seach">
    <form action="<%=path %>/web/article/chaXun" method="post">
    <select name="firstType" id="firstType">
    <option>全部</option>
         <c:forEach items="${requestScope.firsttypes}" var="firsttype">
					 <option 
				 		<c:if test="${requestScope.rubbish.secondtype.firsttype.title==firsttype.title }">selected</c:if>	
				 	value="${firsttype.id}">${firsttype.title }</option>
		 </c:forEach>
    </select>
    <select name="secondType" id="secondType">
         
    </select>
    <select name="rubbishId" id="rubbish">
         <option>全部</option>
    </select>
   <input type="submit" name="submit" id="submit" value="查看分类">   
    </form>
  </div>
</nav>

 <article class="article">
  <div class="title">
    <h1>全部讨论</h1>
    <a href="<%=path %>/web/article/listByTime">时间排序</a>
    <a href="<%=path %>/web/article/reDu">热度排序</a>
    <!-- <a href="#">智能排序？</a> -->
    <a class="bun" id="addArticle" href="javaScript:void(0)">发布文章</a>
  </div>
  <ul>
  	<c:forEach items="${requestScope.pageInfo.list }" var="article">
    <li id="articleDetails">
     <input id="articleId" type="hidden" value="${article.id }"/>
      <h3><a href="javaScript:void(0)">${article.title}</a></h3>
      <span>发布者：${article.userinfo.nickName}</span>
      <span style="margin-left:10px;">浏览：${article.viewCount}</span>
      <span style="margin-left:10px;">点赞：${article.praiseCount}</span>
      <span style="margin-left:10px;">收藏：${article.collectCount}</span>
      <span style="margin-left:10px;">评论：${article.commentCount}</span>
      <span style="margin-left:10px;">来源：${article.source}</span>
      <span style="margin-left:10px;">发布时间：<fmt:formatDate value="${article.inputTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
      <c:if test="${fn:length(article.content)<=100}">
      	<p>${article.content}</p>
      </c:if>
      <c:if test="${fn:length(article.content)>100}">
      	<p>${fn:substring(article.content,0,100)}...</p>
      </c:if>
    </li>
    </c:forEach>
    <c:if test="${requestScope.articles.list[0] eq null}">
    暂时没有此分类下的文章。。您可以<a style="color:blue;" href="<%=path %>/web/article/addArticle">添加一个</a>
    </c:if>
  </ul>

<!-- 分页开始 -->
  <div class="pagination">
    <a id="first" href="<%=path %>/web/article/list?pageNum=1">首页</a>
    <a id="prev" href="javaScript:void(0)" class="number">上一页</a>
    <c:forEach items="${requestScope.pageInfo.navigatepageNums }" var="page">
    	<a id="page${page }" href="<%=path %>/web/article/list?pageNum=${page}" class="number">${page}</a>
    </c:forEach>
    <a id="next" href="javaScript:void(0)" class="number">下一页</a>
    <a id="last" href="<%=path %>/web/article/list?pageNum=${requestScope.pageInfo.pages}">尾页</a>
    <span>共${requestScope.pageInfo.pages}页</span>&nbsp;&nbsp;
	<span>共&nbsp;${requestScope.pageInfo.total}&nbsp;篇文章</span>
  </div>
<!-- 分页结束 -->

</article>
</section>
</div>
<jsp:include page="/WEB-INF/web/includ/footer.jsp"></jsp:include>

<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<script src="<%=path%>/static/managecss/lib/layer/2.4/layer.js"></script>
<script type="text/javascript">
$(function(){
	var path = "${pageContext.request.contextPath}";
	
	/*当前页改变背景颜色*/
	$("#page${requestScope.pageInfo.pageNum}").css("background-color","#666");
	$("#page${requestScope.pageInfo.pageNum}").css("color","white");
	if(${pageNum}<=1){
		$("#prev").css("color","gray");		//当前为第一页，字体颜色为灰色
		$("#prev").css("border","gray");	//当前为第一页，边框颜色为灰色
		$("#first").css("color","gray");	//当前为第一页，首页颜色为灰色
		$("#first").css("border","gray");	//当前为第一页，首页边框颜色为灰色
	} 
	if(${pageNum}>=${requestScope.pageInfo.pages}){

		$("#next").css("color","gray");		//当前为最后页，字体颜色为灰色
		$("#next").css("border","gray");	//当前为最后页，边框颜色为灰色
		$("#last").css("color","gray");	//当前为最后页，尾页颜色为灰色
		$("#last").css("border","gray");	//当前为最后页，尾页边框颜色为灰色
	}
	
	
	/*上一页，下一页*/
	 $("#prev").click(function(){
		if(${pageNum}<=1){
			$(this).attr("href","javaScript:void(0)");
		}else{
			$(this).attr("href",path+"/web/article/list?pageNum=${pageNum-1}");
		}
	});
	
	$("#next").click(function(){
		if(${pageNum}>=${requestScope.pageInfo.pages}){
			$(this).attr("href","javaScript:void(0)"); 
		}else{
			$(this).attr("href",path+"/web/article/list?pageNum=${pageNum+1}");
		}
	});
	
	/*点击一篇文章查看详情*/
	 $("li[id=articleDetails]").click(function(){
		var articleId = $(this).children("#articleId").val();
		location.href = path+"/web/article/articleSingle?articleId="+articleId;
	});
	
	/*点击发布文章，判断是否登录*/
	$("#addArticle").click(function(){
		var userinfoId = "${sessionScope.userinfo.id}"
		if(userinfoId!=""){
			location.href = path+"/web/article/addArticle";
		}else{
			layer.confirm('请前往登录', {
				  btn: ['前往', '取消'] 
				  ,
				}, function(index, layero){
					location.href = path+"/web/userLogin/login";
					layer.close(index);	
				
				}, function(index){
				  
					
				});
			
		}
	});
	
	
	
});
$(function() {
	$("#seachBySolr").click(function() {
	var keyword = $(this).prev().val();

	location.href="<%=path %>/web/seachArticle?keyword="+keyword;  
})
})

$(function() {
		
			$("#page${requestScope.questions.pageNum}").css("background-color","#666");
			$("#page${requestScope.questions.pageNum}").css("color","#fff");
		  initSecondType(); 
			//给二级分类添加change事件
			$("#firstType").change(initSecondType);
			//给垃圾添加change事件
			$("#secondType").change(initRubbish);
		});
		
		function initSecondType() {
			var secondTitle = "${requestScope.rubbish.secondtype.title}";
				var firstTypeId = $("#firstType").val();
				$("#secondType").empty();
				$("#secondType").append("<option>全部</option>");
		$.ajax({
					type : "POST",
					url : "<%=path%>/web/question/findAllByFirstTypeId",
					data : "firstTypeId="+firstTypeId,
					dataType:"json",
					success : function(secondtypes) {
					 for(var i=0;i<secondtypes.length;i++)
					 {
						 if(secondTitle==secondtypes[i].title){
						 		$("#secondType").append("<option selected value=\""+secondtypes[i].id+"\">"+secondtypes[i].title+"</option>");
						 }else{
							 $("#secondType").append("<option value=\""+secondtypes[i].id+"\">"+secondtypes[i].title+"</option>");
						 }
					 	
					 }	
					 
					//初始化三級
					 initRubbish(); 
						
					}
				}); 
			}
	
		function initRubbish() {
			var rubbishName = "${requestScope.rubbish.name}";
			var secondTypeId = $("#secondType").val();
			$("#rubbish").empty();
			$("#rubbish").append("<option>全部</option>");
	$.ajax({
				type : "POST",
				url : "<%=path%>/web/question/findAllBySecondTypeId",
				data : "secondTypeId="+secondTypeId,
				dataType:"json",
				success : function(rubbishs) {
				 for(var i=0;i<rubbishs.length;i++)
				 {
					 if(rubbishName==rubbishs[i].name){
							$("#rubbish").append("<option selected value=\""+rubbishs[i].id+"\">"+rubbishs[i].name+"</option>");
					 }else{
							$("#rubbish").append("<option value=\""+rubbishs[i].id+"\">"+rubbishs[i].name+"</option>");
					 }
				 }						
				}
			}); 
		} 


</script>
</body>
</html>

